<!-- templates/deployments.html -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ settings.app_name }} - 部署管理</title>
    <link rel="stylesheet" href="/static/style.css">
</head>
<body>
    <div class="container">
        <h1>{{ settings.app_name }} - 部署管理面板</h1>

        <div class="card manual-trigger">
            <h2>手动部署</h2>
            <p>点击下方按钮手动触发一次部署。</p>
            <form action="/admin/deployments/trigger_manual" method="post">
                <button type="submit" class="button primary">手动触发部署</button>
            </form>
        </div>

        <div class="card deployment-history">
            <h2>部署历史记录</h2>
            {% if deployments %}
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>时间</th>
                        <th>触发方式</th>
                        <th>仓库/分支</th>
                        <th>Commit ID</th>
                        <th>Commit Message</th>
                        <th>状态</th>
                        <th>耗时 (秒)</th>
                        <th>输出/错误</th>
                    </tr>
                </thead>
                <tbody>
                    {% for deploy in deployments %}
                    <tr class="status-{{ deploy.status }}">
                        <td>{{ deploy.id }}</td>
                        <td>{{ deploy.timestamp.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                        <td>{{ deploy.trigger_type }}</td>
                        <td>
                            {% if deploy.repo_name %}{{ deploy.repo_name }}{% else %}N/A{% endif %}
                            {% if deploy.branch %}/{{ deploy.branch }}{% else %}{% endif %}
                        </td>
                        <td>
                            {% if deploy.commit_id %}
                                <span title="{{ deploy.commit_id }}">{{ deploy.commit_id[:8] }}...</span>
                            {% else %}N/A{% endif %}
                        </td>
                        <td>
                            {% if deploy.commit_message %}
                                <span title="{{ deploy.commit_message }}">{{ deploy.commit_message[:50] }}{% if deploy.commit_message|length > 50 %}...{% endif %}</span>
                            {% else %}N/A{% endif %}
                        </td>
                        <td>{{ deploy.status }}</td>
                        <td>{% if deploy.duration_seconds is not none %}{{ "%.2f"|format(deploy.duration_seconds) }}{% else %}N/A{% endif %}</td>
                        <td>
                            {% if deploy.output %}
                                <button class="toggle-output-btn" data-id="{{ deploy.id }}">查看</button>
                                <pre id="output-{{ deploy.id }}" class="hidden">{{ deploy.output }}</pre>
                            {% else %}
                                <span class="no-output">无输出</span>
                            {% endif %}
                            {% if deploy.error_message %}
                                <button class="toggle-error-btn" data-id="{{ deploy.id }}">错误</button>
                                <pre id="error-{{ deploy.id }}" class="error-output hidden">{{ deploy.error_message }}</pre>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% else %}
            <p>暂无部署历史记录。</p>
            {% endif %}
        </div>
    </div>

    <script>
        document.querySelectorAll('.toggle-output-btn').forEach(button => {
            button.addEventListener('click', () => {
                const id = button.dataset.id;
                const outputElement = document.getElementById(`output-${id}`);
                outputElement.classList.toggle('hidden');
                button.textContent = outputElement.classList.contains('hidden') ? '查看' : '隐藏';
            });
        });
        document.querySelectorAll('.toggle-error-btn').forEach(button => {
            button.addEventListener('click', () => {
                const id = button.dataset.id;
                const errorElement = document.getElementById(`error-${id}`);
                errorElement.classList.toggle('hidden');
                button.textContent = errorElement.classList.contains('hidden') ? '错误' : '隐藏';
            });
        });
    </script>
</body>
</html>
